<template>
  <div style="height: 100%; padding: 12px 12px 0">
    <el-container style="height: 100%">
      <el-aside width="220px" style="background-color: white; padding: 2px; margin-bottom: 0">
        <auth-project @selectBuilding="getCurrentProject" />
      </el-aside>
      <el-main style="padding: 0 0 0 20px">
        <el-form ref="queryForm" :model="queryParams" size="mini" inline>
          <el-form-item prop="floor">
            <el-input v-model.number="queryParams.floor" placeholder="请输入楼层" clearable />
          </el-form-item>
          <el-form-item prop="checkUserName">
            <el-input v-model="queryParams.checkUserName" placeholder="请输入报验人" clearable />
          </el-form-item>
          <el-form-item prop="checktypeId">
            <el-select v-model="queryParams.checktypeId" placeholder="请选择分项工程" clearable filterable @change="changeChecktype">
              <el-option v-for="item in checkTypeList" :key="item.fid" :label="`${item.fnumber} - ${item.fnameL2}`" :value="item.fid" />
            </el-select>
          </el-form-item>
          <el-form-item prop="checktableId">
            <el-select v-model="queryParams.checktableId" placeholder="请选择工序" clearable filterable style="width: 300px">
              <el-option v-for="item in checkTableList" :key="item.fid" :label="`${item.cfseq} - ${item.fnameL2}`" :value="item.fid" />
            </el-select>
          </el-form-item>
          <el-form-item prop="state">
            <el-select v-model="queryParams.state" placeholder="状态" clearable filterable>
              <el-option v-for="item in checkStatusList" :key="'checkResult' + item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="beginDate">
            <el-date-picker v-model="queryParams.beginDate" value-format="yyyy-MM-dd" type="date" placeholder="报验时间从" />
          </el-form-item>
          <el-form-item prop="endDate">
            <el-date-picker v-model="queryParams.endDate" value-format="yyyy-MM-dd" type="date" placeholder="报验时间到" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            <el-button icon="el-icon-view" @click="$refs.CancelList.open({ buildingId: currBuilding.id })">撤销报验列表</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="listLoading" :data="list" size="mini" height="calc(100% - 160px)">
          <el-table-column label="状态" prop="cfstate" align="center" width="80">
            <dict-tag slot-scope="{ row }" :options="checkStatusList" :value="row.state" />
          </el-table-column>
          <el-table-column label="分项工程" prop="checkTypeName" />
          <el-table-column label="工序" prop="checkTableName" />
          <el-table-column label="检验批" prop="batchNumber" align="center" />
          <el-table-column label="检验批说明" prop="description" min-width="100" />
          <el-table-column label="报验人" prop="inspector" />
          <el-table-column label="报验时间" prop="inspectionTime" align="center" width="150" />
          <el-table-column label="操作时间" align="center" width="100" :formatter="row => dateFmt(row.createTime)" />
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="$refs.InspectionDetail.open({ id: row.id })">详情</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="$refs.CancelInspection.open({ inspectionId: row.id })" v-hasPermi="['cqCheck:inspection:cancel']">撤销报验</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-main>
    </el-container>

    <CancelList ref="CancelList" />
    <CancelInspection ref="CancelInspection" v-model="showCancelInspection" @ok="getList" />
    <InspectionDetail ref="InspectionDetail" />
  </div>
</template>
<script>
// 质检报验
import { listInspection } from '@/api/cqCheck'
import { listCheckType } from '@/api/qualityManage/checkType'
import { listCheckTable } from '@/api/qualityManage/checkTable'
import AuthProject from '@/views/qualityManage/components/AuthProject'
import CancelList from './components/CancelList'
import CancelInspection from './components/CancelInspection'
import InspectionDetail from './components/InspectionDetail'
const checkStatusList = [
  { label: '已报验', value: '2', raw: { listClass: 'primary' } },
  { label: '未报验', value: '1', raw: { listClass: 'info' } }
]
export default {
  name: 'CheckRecord',
  components: {
    AuthProject,
    CancelList,
    CancelInspection,
    InspectionDetail
  },
  data() {
    return {
      checkStatusList,
      listLoading: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        buildingId: '',
        floor: '',
        checkUserName: '',
        checktypeId: '',
        checktableId: '',
        state: '',
        beginDate: '',
        endDate: ''
      },
      checkTypeList: [],
      checkTableList: [],
      currBuilding: {},
      showCancelInspection: false
    }
  },
  created() {
    this.getCheckList()
    this.getCheckTableList()
  },
  methods: {
    async getCheckList() {
      // 分部分项
      const res = await listCheckType().catch(() => false)
      if (res === false) return
      this.checkTypeList = res.data
    },
    async getCheckTableList() {
      // 获取工序列表
      const res = await listCheckTable({ cfchecktypeid: this.queryParams.checktypeId }).catch(() => false)
      if (res === false) return
      this.checkTableList = res.data
    },
    changeChecktype() {
      this.queryParams.checktableId = ''
      this.getCheckTableList()
    },
    getCurrentProject(data) {
      this.currBuilding = data
      if (!data.id) return (this.list = [])
      this.queryParams.buildingId = data.id
      this.getList()
    },
    async getList() {
      if (!this.queryParams.buildingId) return this.$message.warning('请先选择楼栋')

      this.listLoading = true
      const res = await listInspection(this.queryParams).catch(() => false)
      this.listLoading = false
      if (res === false) return

      this.list = res.data.records
      this.total = res.data.total
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.buildingId = this.currBuilding.id
      this.handleQuery()
    }
  }
}
</script>
